<script setup>
import { defineProps,defineEmits,onUnmounted } from 'vue'
let props=defineProps({
    modelValue: {
        type: Boolean,
        default: false
    }
})
let emits=defineEmits(['update:modelValue'])


//esc键关闭
const keyListener=(e)=>{
    if(e.key=='Escape'){
        emits('update:modelValue',false);
    }
}
window.addEventListener('keyup',keyListener)
//卸载按键事件
onUnmounted(()=>{
    window.removeEventListener('keyup',keyListener)
})

//点击关闭
const clickEvents=(e)=>{
    emits('update:modelValue',false);
}
</script>

<template>
    <teleport to='body'>
        <transition name="dialogShow">
            <div class="mask" v-if="modelValue" @click.stop="clickEvents($event)">
                <div class="dialog" @click.stop="">
                    <i class="close" @click.stop="clickEvents($event)">&#xe75e;</i>
                    <slot></slot>
                </div>
            </div>
        </transition>
    </teleport>
</template>

<style scoped>
.dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100vw;
    max-height: 100vh;
    /* overflow: scroll; */
    transform: translate(-50%, -50%);
    z-index: 1000;
    border-radius: 1em;
    padding: 1em 2em;
    box-shadow: 1em 1em 3em var(--color-text-third);
    background-color: var(--color-text-light-first);
    animation: disappear .5s;
}
@keyframes disappear {
    0%{
        transform: translate(-50%,-20%);
    }
    100%{
        transform: translate(-50%,-50%);
    }
}
.mask {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.1);
    backdrop-filter: blur(1em);
}

.dialogShow-enter-active,
.dialogShow-leave-active {
    transition: all .5s;
}

.dialogShow-enter-from,
.dialogShow-leave-to {
    opacity: 0;
}

.dialogShow-enter-to,
.dialogShow-leave-from {
    opacity: 1;
}
.close{
    display: inline-block;
    position: absolute;
    right: .8em;
    top: .8em;
    height: 1em;
    width: 1em;
    cursor: pointer;
}
.close:hover {
    color: var(--color-theme);
}
</style>